<!DOCTYPE HTML >
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>jquery的购物车</title>
    <style type="text/css">
        table {
            width: 800px;
            margin: 10px auto;
            border-collapse: collapse;
            border: 1px solid blue;
        }

        table td, table th {
            border: 1px solid blue;
            padding: 10px;
            font-size: 20px;
        }

        .cla_1 {
            font-size: 20px;
            width: 80px;
            margin: 5px 20px;
        }

        #span_money {
            border: 1px solid blue;
        }
    </style>
    <script src="http://libs.baidu.com/jquery/1.7.1/jquery.min.js"></script>
    <script>
        // 记录 全选按钮的状态
        let flag = false;
        $(function () {
            // TODO 页面加载完毕执行

            $("#form_add").bind("submit", function () {
                // TODO 给 加入购物车 的按钮 添加 提交行为

                // 获取属性
                let name = $("#form_add input[name='name']").val().trim();
                let price = $("#form_add input[name='price']").val().trim();
                let number = $("#form_add input[name='number']").val().trim();
                let type = $("#form_add select[name='type']").val().trim();
                let message = `${name} ${price} ${number} ${type}`;
                console.log(message);
                /**
                 * <tr><td><input type='checkbox' name='goods'/></td> <td>耐克</td> <td>199</td> <td>2</td><td>衣服</td></tr>
                 */
                    // 根据 参数 创建一个  tr
                let tr = `<tr><td><input type='checkbox' name='goods' onchange="getSum()" /></td> <td>${name}</td> <td>${price} </td> <td>${number}</td><td>${type}</td></tr>`;
                console.log(tr);
                let $tr = $(tr);
                console.log($tr.html());

                // 插入 到 按钮行 之前
                $("#tr_but").before($tr);

            })

            // 计算总价
            $("#tab_car input[type='checkbox']").bind("change", getSum);


            // 付款
            $("#but_buy").bind("click", del);

            // 全选
            $("#but_all").bind("click", all);

            // 反选
            $("#but_fan").bind("click", fan);
        })

        function all() {
            // TODO 全选
            let $tr = $("#tab_car tr").has("input[type='checkbox']");
            if (flag == false) {
                // 第一次被点击，全选
                $.each($tr, function (i, item) {
                    let check = $(item).children(":first").children(0);
                    console.log(check.prop("checked"));
                    check.prop("checked", true);
                })
                getSum();
            } else {
                // 第二次被点击，取消全选
                $.each($tr, function (i, item) {
                    let check = $(item).children(":first").children(0);
                    console.log(check.prop("checked"));
                    check.prop("checked", false);
                })
                getSum();
            }
            // 改变 flag 的状态
            flag = !flag;
        }

        function fan() {
            // TODO 反选
            // 获取所有的 有 checkbox 的 tr
            let $tr = $("#tab_car tr").has("input[type='checkbox']");
            $.each($tr, function (i, item) {

                let check = $(item).children(":first").children(0);
                console.log(check.prop("checked"));
                if (check.prop("checked")) {
                    // 选中，删除
                    check.prop("checked", false);
                    getSum();
                } else {
                    // 没有选中，选中
                    check.prop("checked", true);
                    getSum();
                }


            })

        }

        function getSum() {
            console.log("执行了");
            // TODO 给所有的 checkbox 添加行为
            // 初始化价格为 0
            $("#span_money").text(0);
            // 获取所有被选中的 checkbox 的 tr
            let $tr = $("#tab_car tr").has("input[type='checkbox']:checked");
            $.each($tr, function (i, item) {
                // 获取 价格 和 数量
                let price = $(item).children(":eq(2)").text();
                let num = $(item).children(":eq(3)").text();
                // 获取 价格
                let span_money = $("#span_money");
                // 计算总价
                let sum = parseInt(span_money.text()) + (price * num);
                // 设置价格
                span_money.text(sum);
            })

        }

        function del() {
            // TODO 删除方法
            $("#tab_car tr").has("input[type='checkbox']:checked").remove();
            getSum();
        }
    </script>
</head>
<body>
<table id="tab_car">
    <tr>
        <th>多选</th>
        <th>商品名称</th>
        <th>商品价格</th>
        <th>商品数量</th>
        <th>商品类型</th>
    </tr>
    <tr>
        <td><input type='checkbox' name='goods'/></td>
        <td>耐克</td>
        <td>199</td>
        <td>2</td>
        <td>衣服</td>
    </tr>
    <tr>
        <td><input type='checkbox' name='goods'/></td>
        <td>铅笔</td>
        <td>2</td>
        <td>3</td>
        <td>文具</td>
    </tr>
    <tr>
        <td><input type='checkbox' name='goods'/></td>
        <td>手机</td>
        <td>2000</td>
        <td>2</td>
        <td>家电</td>
    </tr>
    <tr id="tr_but">
        <th colspan="5">
            <input type="button" value="付款" id="but_buy" class="cla_1"/>
            <input type="button" value="全选/全不选" id="but_all" class="cla_1"/>
            <input type="button" value="反选" id="but_fan" class="cla_1"/>
            <span id="span_money"> </span>
        </th>
    </tr>
</table>
<hr/>
<form id="form_add" action="javascript:void(0);">
    <table id="tab_form">
        <tr>
            <th>商品名称:</th>
            <td><input type="text" name="name"/></td>
        </tr>
        <tr>
            <th>商品价格:</th>
            <td><input type="text" name="price"/></td>
        </tr>
        <tr>
            <th>商品数量:</th>
            <td><input type="text" name="number"/></td>
        </tr>
        <tr>
            <th>商品类型:</th>
            <td><select name="type">
                <option>衣服</option>
                <option>文具</option>
                <option>食物</option>
                <option>家电</option>
            </select></td>
        </tr>
        <tr>
            <th colspan="2">
                <input type="submit" value="加入购物车"/>
            </th>
        </tr>
    </table>
</form>
</body>
</html>